.relation-graph {
    /*****************************[graph]****************************************/
    position: relative;
    .rel-map {
        svg {
            height: 100%;
            width: 100%;
        }
    }

    .rel-nodediv-for-webkit {
        position: absolute;
        width: 100%;
        top: 0px;
        left: 0px;
        z-index: 1000;
    }

    .rel-linediv {
        /*user-select: none;*/
        position: absolute;
        z-index: 900;
        width: 100%;
        top: 0px;
        left: 0px;
        --stroke: url('#lineStyle');
        --markerEnd: url('#arrow-default');
        --markerStart: url('#start-arrow-default');
        --markerEndChecked: url('#arrow-checked');
        --markerStartChecked: url('#start-arrow-checked');
    }

    .rel-linediv svg {
        overflow: visible
    }

    /*****************************[canvas]****************************************/
    .rel-map {
        background-color: #ffffff;
        /*background-image: url("/static/images/graph-bg.png");*/
        overflow: hidden;
        cursor: default;
        user-select: none;
    }

    .rel-map-background-norepeat {
        background-repeat: no-repeat;
        background-position: right bottom;
    }

    .rel-nodediv-for-webkit {
        position: absolute;
        width: 100%;
        top: 0px;
        left: 0px;
        z-index: 1000;
    }

    .rel-map-canvas {
        position: relative;
        top: 0px;
        left: 0px;
        /*overflow:hidden;*/
        border: 0px;
        z-index: 3;
        /*background-color: #efefef;*/
        /*border-top: #efefef dashed 1px;*/
        /*border-left: #efefef dashed 1px;*/
        /*width:30px;*/
        /*height:30px;*/
    }

    .rel-map ::v-deep img {
        -webkit-user-drag: none;
        -webkit-user-select: none;
    }

    /*****************************[line]****************************************/
    .c-rg-line-text {
        fill: #888888;
        font-size: 12px;
    }

    .c-rg-line {
        z-index: 1000;
        fill-rule: nonzero;
        /*marker-end: url('#arrow');*/
        /* firefox bug fix - won't rotate at 90deg angles */
        /*-moz-transform: rotate(-89deg) translateX(-190px);*/
        /*animation-timing-function:linear;*/
        /*animation: ACTRGLineInit 1s;*/
    }

    .rg-line-dashtype-1 {
        stroke-dasharray: 2, 2, 2;
        stroke-dashoffset: 3px;
        stroke-linecap: butt;
        stroke-linejoin: bevel;
    }

    .rg-line-dashtype-2 {
        stroke-dasharray: 5, 5, 5;
        stroke-dashoffset: 3px;
        stroke-linecap: butt;
        stroke-linejoin: bevel;
    }

    .rg-line-dashtype-3 {
        stroke-dasharray: 9, 9, 9;
        stroke-dashoffset: 3px;
        stroke-linecap: butt;
        stroke-linejoin: bevel;
    }

    .rg-line-dashtype-4 {
        stroke-dasharray: 5, 5, 15;
        stroke-dashoffset: 3px;
        stroke-linecap: butt;
        stroke-linejoin: bevel;
    }

    @keyframes ACTRGLineChecked {
        0% {
            stroke-dashoffset: 352px;
            stroke-dasharray: 5, 5, 5;
        }
        50% {
            stroke-dasharray: 5, 5, 5;
            stroke-dashoffset: 3px;
        }
        100% {
            stroke-dashoffset: 352px;
            stroke-dasharray: 5, 5, 5;
        }
    }
    @keyframes rg-line-anm2 {
        from {
            stroke-dashoffset: 0;
            stroke-dasharray: 4, 4, 4;
        }
        to {
            stroke-dashoffset: 10px;
            stroke-dasharray: 20, 20, 20;
        }
    }
    @keyframes rg-line-anm3 {
        0% {
            stroke-opacity: 1;
        }
        50% {
            stroke-opacity: 0.2;
        }
        100% {
            stroke-opacity: 1;
        }
    }
    @keyframes rg-line-anm4 {
        0% {
            stroke-dasharray: 0, 100%;
        }
        100% {
            stroke-dasharray: 100%, 0;
        }
    }

    .rg-line-anm-1 {
        animation: ACTRGLineChecked 10s infinite;
    }

    .rg-line-anm-2 {
        animation: rg-line-anm2 3s infinite;
    }

    .rg-line-anm-3 {
        animation: rg-line-anm3 1s infinite;
    }

    .rg-line-anm-4 {
        animation: rg-line-anm4 3s infinite;
    }

    .c-rg-line-checked {
        /*stroke: var(--stroke);*/
        /*marker-end: var(--markerEndChecked) !important;*/
        /*stroke-width: 2px;*/
        /*stroke-dasharray: 5, 5, 5;*/
        /*stroke-dashoffset: 3px;*/
        /*stroke-linecap: butt;*/
        /*stroke: #FD8B37;*/
        /*stroke-linejoin: bevel;*/
        /* firefox bug fix - won't rotate at 90deg angles */
        /*-moz-transform: rotate(-89deg) translateX(-190px);*/
        filter: drop-shadow(rgba(253, 139, 55, 1) 0px 0px 3px);
    }


    @keyframes deform1 {
        from {
            stroke-dashoffset: 0;
        }
        to {
            stroke-dashoffset: 100%;
        }
    }

    .c-rg-line-path {
        /*stroke: url("#gradient");*/
        /*mask: url("#line-mask");*/
    }

    /*****************************[node]****************************************/
    .rg-icon {
        width: 19px;
        height: 19px;
        vertical-align: 0px;
        fill: currentColor;
        overflow: hidden;
    }

    .el-icon-remove, .el-icon-circle-plus {
        cursor: pointer;
    }

    .rel-node-peel {
        clear: both;
        padding: 8px;
        position: absolute;
        font-size: 14px;
        /*border:green solid 1px;*/
    }

    .rel-node {
        text-align: center;
    }
    .rel-node-shape-0 {
        width: 80px;
        height: 80px;
        border-radius: 50%;
    }
    .rel-node-shape-1 {
        /*border: #FD8B37 solid 1px;*/
        border-radius: 5px;
    }
    .c-node-text {
        height: 100%;
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .rel-node-shape-1 .c-node-text {
        /*border: #FD8B37 solid 1px;*/
        padding-left: 5px;
        padding-right: 5px;
    }

    .rel-node-type-button {
        border-radius: 25px;
        color: blue;
        cursor: pointer;
    }

    .rel-node-hover {
    }

    .rel-node-checked {
        box-shadow: 0px 0px 10px #FD8B37;
        animation: ACTRGNodeInit 1s linear;
    }

    .rel-node-selected {
        border: #025098 solid 2px;
        border-radius: 5px;
    }

    .rel-node-flashing {
        animation: ACTRGNodeFlashing 2s infinite;
    }

    .rel-node-vtree-2 {
        transform-origin: 0 0; /* 设置旋转中心为左上角*/
        /*transform-origin:50% 50%;!* 设置放大中心为元素中心 *!*/
        transform: rotate(30deg) translateX(0px);
    }

    .rel-node-vtree {
        width: 130px;
        height: 45px;
        text-align: left;
    }

    .c-btn-open-close {
        position: absolute;
        height: 100%;
        width: 19px;
        /*border:red solid 1px;*/
        display: flex;
        align-items: center;
        justify-content: center;
        /*border:#ff0000 solid 1px;*/
        user-select: none;
        pointer-events: none;
        cursor: pointer;
    }

    .c-btn-open-close span {
        width: 19px;
        height: 19px;
        display: inline-block;
        text-align: center;
        border-radius: 15px;
        color: #ffffff;
        cursor: pointer;
        font-size: 19px;
        line-height: 16px;
        background-size: 100% 100%;
        pointer-events: all;
    }

    .c-expanded {
        background-image: url(data:image/svg+xml;%20charset=utf8,%3Csvg%20t=%221606310217820%22%20viewBox=%220%200%201024%201024%22%20version=%221.1%22%20xmlns=%22http://www.w3.org/2000/svg%22%20p-id=%223373%22%20width=%2232%22%20height=%2232%22%3E%3Cpath%20d=%22M853.333333%20480H544V170.666667c0-17.066667-14.933333-32-32-32s-32%2014.933333-32%2032v309.333333H170.666667c-17.066667%200-32%2014.933333-32%2032s14.933333%2032%2032%2032h309.333333V853.333333c0%2017.066667%2014.933333%2032%2032%2032s32-14.933333%2032-32V544H853.333333c17.066667%200%2032-14.933333%2032-32s-14.933333-32-32-32z%22%20p-id=%223374%22%20fill=%22white%22%3E%3C/path%3E%3C/svg%3E);
    }

    .c-collapsed {
        background-image: url(data:image/svg+xml;%20charset=utf8,%3Csvg%20t=%221606310454619%22%20class=%22icon%22%20viewBox=%220%200%201024%201024%22%20version=%221.1%22%20xmlns=%22http://www.w3.org/2000/svg%22%20p-id=%223662%22%20width=%22128%22%20height=%22128%22%3E%3Cpath%20d=%22M853.333333%20554.666667H170.666667c-23.466667%200-42.666667-19.2-42.666667-42.666667s19.2-42.666667%2042.666667-42.666667h682.666666c23.466667%200%2042.666667%2019.2%2042.666667%2042.666667s-19.2%2042.666667-42.666667%2042.666667z%22%20p-id=%223663%22%20fill=%22white%22%3E%3C/path%3E%3C/svg%3E);
    }

    .c-expand-positon-left {
        margin-top: -8px;
        margin-left: -25px;
    }

    .c-expand-positon-right {
        height: 100%;
        width: 100%;
        justify-content: center;
    }

    .c-expand-positon-right span {
        margin-top: -18px;
        margin-right: -18px;
        margin-left: 100%;
    }

    .c-expand-positon-bottom {
        height: 100%;
        width: 100%;
        margin-top: 7px;
        margin-left: -8px;
        align-items: flex-end;
        justify-content: center;
    }

    .c-expand-positon-top {
        height: 18px;
        width: 100%;
        margin-top: -20px;
        margin-left: -6px;
        align-items: flex-end;
        justify-content: center;
    }

    @keyframes ACTRGNodeInit {
        from {
            box-shadow: 0px 0px 15px #FD8B37;
        }
        50% {
            box-shadow: 0px 0px 1px rgb(46, 78, 143);
        }
        100% {
            box-shadow: 0px 0px 15px #FD8B37;
        }
        to {
            box-shadow: 0px 0px 15px #FD8B37;
        }
    }
    @keyframes ACTRGNodeFlashing {
        from {
            box-shadow: 0px 0px 15px #FD8B37;
        }
        40% {
            box-shadow: 0px 0px 1px rgb(46, 78, 143);
        }
        70% {
            box-shadow: 0px 0px 8px #FD8B37;
        }
        100% {
            box-shadow: 0px 0px 0px #FD8B37;
        }
    }

    .rel-diy-node {
        padding: 0px;
    }

    /*****************************[debug]****************************************/
    .c-setting-panel {
        --height: 300px;
        --width: 200px;
        width: 300px;
        height: 200px;
        position: absolute;
        margin-left: 10px;
        margin-top: 5px;
        font-size: 12px;
        color: rgb(58, 91, 178);
        padding: 10px;
        overflow: hidden;
        box-shadow: 0px 0px 5px #999999;
        border-radius: 5px;
        z-index: 1000;
        background-color: #ffffff;
        border: #999999 solid 1px;
        padding-top: 60px;
    }

    .c-setting-panel-button {
        height: 35px;
        width: 35px;
        font-size: 8px;
        line-height: 35px;
        text-align: center;
        border-radius: 50%;
        position: absolute;
        margin-left: 25px;
        margin-top: 20px;
        background-color: rgb(58, 91, 178);
        color: #ffffff;
        cursor: pointer;
        z-index: 1001;
        box-shadow: 0px 0px 8px #999999;
    }

    .c-setting-panel-button:hover {
        box-shadow: 0px 0px 20px #FFA20A;
        border: #ffffff solid 1px;
        color: #FFA20A;
        -moz-transform: rotate(-89deg) translateX(-190px);
        animation-timing-function: linear;
        animation: flashButton 2s infinite;
    }

    .c-fixedLayout {
        position: fixed;
        top: 125px
    }

    @keyframes flashButton {
        from {
            box-shadow: 0px 0px 8px rgb(46, 78, 143);
        }
        30% {
            box-shadow: 0px 0px 20px #FFA20A;
        }
        to {
            box-shadow: 0px 0px 8px rgb(46, 78, 143);
        }
    }

    .c-debug-tools-row {
        text-align: left;
    }

    /*****************************[Operate]****************************************/
    .rel-operate {
        position: absolute;top:0px;left:0px;width:100%;height: 100%;z-index: 999;
    }
    .rel-selection {
        position: absolute;background-color: rgba(14, 122, 123, 0.3);border:rgba(14, 122, 123, 1) solid 1px;
    }
}
